<template>
	<view class="ztimg_container"
		:style="{height: pPos[3] + 'rpx', width: pPos[2] + 'rpx', top: pPos[1] + 'rpx', left: 0,transform: 'scale(' + newScale + ')'}">
		<view class="combinationborder"
			v-if="children.length > 0">
			<view v-for="(item,index) in children">
				<ztimg :checkbox="item.checkbox" :imgsrc="item.img" :pPos="pPos" @focus="change_focus" :data-index="index"
					:dataid="index" :cStv="item.cStv" :newScale="newScale" :status="0" :rpxTopx='rpx_to_px'
					@posInited="element_pos_inited" :classid="'inner-div'" @stvChanged='element_stvChanged'
					:imgStv="item.imgStv" @addchexiao='add_element_chexiao' v-if="item.type==0 && item.hasdel==0"
					@updateimg="updateimg" @showedit='go_change_pic' :ismoving="ismoving" @down='go_down'
					:zindex="item.zindex+1" @up='go_up' @del='del_pic' :toumingdu="item.toumingdu"></ztimg>
			</view>
		</view>
	</view>
</template>

<script>
	import ztimg from '@/components/ztimg/index.vue'
	import zttxt from '@/components/zttxt/index.vue'
	export default {
		name: 'mycombination',
		components: {
			ztimg,
			zttxt
		},
		props: {
			newScale: {
				type: Number,
				value: 1
			},
			pPos: {
				type: Array,
				value: []
			},
			rpx_to_px: {
				type: Number,
				value: 1
			},
			children: {
				type: Array,
				value: []
			},
			imgsrc: {
				type: String,
				value: ''
			},
			imgid: {
				type: String,
				value: ''
			},
			stv: {
				type: Object,
				value: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				}
			},
			width: {
				type: Number,
				value: 0
			},
			height: {
				type: Number,
				value: 0
			},
			isfocus: {
				type: Number,
				value: 1,
			},
			s: {
				type: Number,
				value: 1
			},
			ismoving: {
				type: Number,
				value: 0
			}
		},
		watch: {
			children: {
				handler(newval, oldval) {
					this.getelement_max(newval)
				},
				deep: true,
				immediate: true
			},
		},
		data() {
			return {
				cStv: '',
				border: {
					height: 0,
					width: 0,
					top: 0,
					left: 0
				},
				arr: []
			}
		},
		created() {

		},
		methods: {
			getelement_max(newval) {
				if (this.border.top == 0) {
					this.border.top = newval[0].container[1]
				}
				if (this.border.left == 0) {
					this.border.left = newval[0].container[0]
					this.cStv = newval[0].cStv
				}
				for (var i = 0; i < newval.length; i++) {
					if (newval[i].container[1] < this.border.top) {
						this.border.top = newval[i].container[1]
					}
					if (newval[i].container[0] < this.border.left) {
						this.border.left = newval[i].container[0]
						this.cStv = newval[0].cStv
					}
				}
			},
			element_pos_inited: function(e, s) {
				console.log(130, e)
				return
				if (this.border.mintop.y == 0) {
					this.border.mintop.y = e[1]
				}
				if (this.border.mintop.y > e[1]) {
					this.border.mintop.y = e[1]
				}
				if (this.border.maxtop.y == 0) {
					this.border.maxtop.y = e[1]
				}
				if (this.border.maxtop.y < e[1]) {
					this.border.maxtop.y = e[1] + e[2]
				}




				if (this.border.minleft.x == 0) {
					this.border.minleft.x = e[0]
				}
				if (this.border.minleft.x > e[0]) {
					this.border.minleft.x = e[0]
				}
				if (this.border.maxleft.x == 0) {
					this.border.maxleft.x = e[0]
				}
				if (this.border.maxleft.x < e[0]) {
					this.border.maxleft.x = e[0] + e[2]
				}
				this.border.width = this.border.maxleft.x - this.border.minleft.x
				this.border.height = this.border.maxtop.y - this.border.mintop.y
				console.log(137, this.border)
				// height: pos_inited[3] + 'rpx',
				// width: pos_inited[2] + 'rpx',
				// top: pos_inited[1] + 'rpx',
				// left: pos_inited[0] + 'rpx',
			},
			/**
			 * 初始化图片
			 */
			initePic: function() {
				var path = this.imgsrc;
				if ((this.imgsrc == '') || (this.pPos.length == 0)) {
					return;
				}
				wx.showLoading({
					title: '初始化中',
				});
				var that = this;
				wx.getImageInfo({
					src: path,
					success(res) {
						that.originImg = res;
						that.has_inite = 1,
							that.inite_pos(res);
					},
					fail: function(res) {
						that.$emit('del')
					},
				})
			},
			/**
			 * 初始化大小位置
			 */
			inite_pos: function(res) {
				var pic_width = res.width;
				var pic_height = res.height;
				var max_width = this.pPos[2] / 2;
				var max_heght = this.pPos[3] / 2;
				var pos_inited = [];
				if ((pic_width / max_width) <= (pic_height / max_heght)) {
					pos_inited[2] = max_heght * pic_width / pic_height;
					pos_inited[3] = max_heght;
					pos_inited[0] = (max_width - pos_inited[2]) / 2 + max_width / 2;
					pos_inited[1] = max_heght / 2;
				} else {
					pos_inited[0] = max_width / 2;
					pos_inited[2] = max_width;
					pos_inited[3] = max_width * pic_height / pic_width;
					pos_inited[1] = (max_heght - pos_inited[3]) / 2 + max_heght / 2;
				}
				//计算中心点
				var center_pos = [];
				center_pos[0] = 375;
				center_pos[1] = 120 + max_heght;
				this.pos_inited = pos_inited
				this.center_pos = center_pos
				var a = {
					id: 'element' + this.dataid,
					index: this.dataid,
					dataid: "1:" + this.dataid
				}
				this.$emit('posInited', pos_inited, a)
				wx.hideLoading();
			},
		}
	}
</script>

<style lang="less" scoped>
	.combinationborder {
		border: 4rpx dashed blue;
	}

	.ztimg_container {
		position: absolute;
	}

	.ztimg_content {
		overflow: hidden;
		position: absolute;
	}

	.ztimg_content image {
		/* vertical-align: top; */
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.ztimg_kuang {
		border: 2rpx solid rgba(153, 153, 153, 1);
		position: absolute;
	}

	.btn_xuanzhuan_view {
		width: 10vw;
		height: 11vw;
		position: absolute;
		bottom: -11vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn_xuanzhuan {
		width: 5vw;
		height: 5vw;
	}

	.ztimg_kuang_yuan {
		width: 12rpx;
		height: 12rpx;
		background: rgba(153, 153, 153, 1);
		border-radius: 50%;
		position: absolute;
	}

	.btn_suofang_heng {
		width: 14rpx;
		height: 6rpx;
		position: absolute;
	}

	.btn_suofang_shu {
		width: 6rpx;
		height: 14rpx;
		position: absolute;
	}

	.btn_zoom {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn_zoom-img {
		width: 30rpx;
		height: 30rpx;
	}

	.btn_close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tips {
		font-size: 20rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, .6);
		border-radius: 10rpx;
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		width: fit-content;
		width: 186rpx;
		padding: 10rpx 0;
	}
</style>